<template>
  <!-- 星期时间范围选择器组件 -->
  <div class="weekday-time-range-picker">
    <!-- 主要内容区域 -->
    <div class="picker-main-content">
      <!-- 星期和时间选择容器 -->
      <div class="weekday-time-container">
        <!-- 星期选择器 -->
        <el-select v-model="dayOfWeekValue" placeholder="选择星期" class="weekday-select">
          <el-option :value="1" label="星期一" />
          <el-option :value="2" label="星期二" />
          <el-option :value="3" label="星期三" />
          <el-option :value="4" label="星期四" />
          <el-option :value="5" label="星期五" />
          <el-option :value="6" label="星期六" />
          <el-option :value="7" label="星期日" />
        </el-select>
        <!-- 时间范围选择器 -->
        <time-range-picker
          v-model:startTime="startTimeValue"
          v-model:endTime="endTimeValue"
        />
      </div>
      <!-- 时间提示信息 -->
      <div class="time-hint">如果时间不固定，可不填</div>
    </div>
    <!-- 删除按钮（仅在允许删除时显示） -->
    <div class="delete-button" @click="$emit('delete')" v-if="canDelete">
      <span>删除</span>
    </div>
  </div>
</template>

<script>
import TimeRangePicker from './TimeRangePicker.vue'

/**
 * 星期时间范围选择器组件
 * 提供星期和时间范围的选择功能，用于课程时间安排
 * 支持选择星期几和具体的时间范围
 */
export default {
  name: 'WeekdayTimeRangePicker',
  components: {
    TimeRangePicker
  },
  props: {
    /**
     * 星期几，1-7分别代表周一到周日
     */
    dayOfWeek: {
      type: [Number, String],
      default: ''
    },
    /**
     * 开始时间
     */
    startTime: {
      type: [Date, null],
      default: null
    },
    /**
     * 结束时间
     */
    endTime: {
      type: [Date, null],
      default: null
    },
    /**
     * 是否允许删除此时间安排
     */
    canDelete: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:dayOfWeek', 'update:startTime', 'update:endTime', 'delete'],
  computed: {
    /**
     * 星期几的计算属性，用于双向绑定
     */
    dayOfWeekValue: {
      get() {
        return this.dayOfWeek;
      },
      set(value) {
        this.$emit('update:dayOfWeek', value);
      }
    },
    /**
     * 开始时间的计算属性，用于双向绑定
     */
    startTimeValue: {
      get() {
        return this.startTime;
      },
      set(value) {
        this.$emit('update:startTime', value);
      }
    },
    /**
     * 结束时间的计算属性，用于双向绑定
     */
    endTimeValue: {
      get() {
        return this.endTime;
      },
      set(value) {
        this.$emit('update:endTime', value);
      }
    }
  }
}
</script>

<style scoped>
/* 星期时间范围选择器容器 */
.weekday-time-range-picker {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
  transition: all 0.3s;
  width: 100%;
  box-sizing: border-box;
}

/* 悬停效果 */
.weekday-time-range-picker:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  border-color: #dcdfe6;
}

/* 主要内容区域 */
.picker-main-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

/* 星期和时间选择容器 */
.weekday-time-container {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
}

/* 星期选择器样式 */
.weekday-select {
  width: 140px;
}

/* 时间提示信息样式 */
.time-hint {
  font-size: 12px;
  color: #909399;
  margin-left: 2px;
  width: 100%;
  box-sizing: border-box;
}

/* 删除按钮样式 */
.delete-button {
  color: #f56c6c;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f56c6c;
  background-color: rgba(245, 108, 108, 0.05);
  width: 60px;
}

/* 删除按钮悬停效果 */
.delete-button:hover {
  background-color: #f56c6c;
  color: white;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .weekday-time-range-picker {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .delete-button {
    margin-left: 0;
    margin-top: 12px;
    align-self: flex-end;
  }
}
</style> 